<template>
    <div class="menu_and_cart">
        <div class="menu_wrapper">
            <goods-menu :data="goods"></goods-menu>
        </div>
        <div class="cart_wrapper">
<!--            <shop-cart :data="goods"></shop-cart>-->
        </div>
    </div>
</template>

<script>
    import GoodsMenu from './goodsMenu'
    import {getGoods} from 'api'
    export default {
        name: "goods",
        data(){
            return {
                goods: []
            }
        },
        components:{
            GoodsMenu,
        },
        methods:{
            fetch(){
                if(this.goods.length===0){
                    getGoods().then((res)=>{
                        this.goods= res
                    })
                }
            }
        },
        created() {
            this.shopCart= this.shopCart|| this.$createShopCart({
                $props:{ data: 'goods' }
            })
        }
    }
</script>

<style scoped lang="stylus">
    @import "~common/stylus/variable.styl"
    .menu_and_cart
        width: 100%
        height: 100%
        display: flex
        flex-direction: column
        .menu_wrapper
            flex: 1
            position: relative
        .cart_wrapper
            flex: none
            height: 48px
            line-height: 48px

</style>